<template>
    <div class="recomend_box">
        <div class="submit_rec">
            <div class="rec_title">
                <h3>听友评论</h3>
                <p>（已有122183条评论）</p>
            </div>
            <div class="inputrecom">
                <img src="../../../assets/M_redio/player_max/pen.png" alt="">
                <p>发表评论</p>
            </div>
        </div>

        <div class="rec_cont">
            <h3>精彩评论</h3>
            <div class="recomends">
                <img class="touxiang" src="../../../assets/M_redio/player_max/touxiang.jpg" alt="">
                <div class="recright">
                    <p class="recmsg">
                        <span>Snowyi：</span>晒单哈斯和代售点赛事的海底隧道好大神的是好嗲苏杭大赛海带丝都 
                    </p>
                    <div class="rec_bottom">
                        <p class="rec_date">2021年5月3日 13：00</p>
                        <div class="rec_l">
                            <span class="zan">
                                <img src="../../../assets/M_redio/player_max/pen.png" alt="">
                                <p>111890</p>
                            </span>
                            <img src="../../../assets/M_redio/player_max/pen.png" alt="" class="reply">
                        </div>
                    </div>
                </div>
            </div>

            <div class="recomends">
                <img class="touxiang" src="../../../assets/M_redio/player_max/touxiang.jpg" alt="">
                <div class="recright">
                    <p class="recmsg">
                        <span>Snowyi：</span>晒单哈斯和代售点赛事的海底隧道好大神的是好嗲苏杭大赛海带丝都 
                    </p>
                    <div class="rec_bottom">
                        <p class="rec_date">2021年5月3日 13：00</p>
                        <div class="rec_l">
                            <span class="zan">
                                <img src="../../../assets/M_redio/player_max/pen.png" alt="">
                                <p>111890</p>
                            </span>
                            <img src="../../../assets/M_redio/player_max/pen.png" alt="" class="reply">
                        </div>
                    </div>
                </div>
            </div>

            <div class="recomends">
                <img class="touxiang" src="../../../assets/M_redio/player_max/touxiang.jpg" alt="">
                <div class="recright">
                    <p class="recmsg">
                        <span>Snowyi：</span>晒单哈斯和代售点赛事的海底隧道好大神的是好嗲苏杭大赛海带丝都 誓师大会is的哈四大行晒单哈斯和代售点赛事的海底隧道好大神的是好嗲苏杭大赛海带丝都 誓师大会is的哈四大行
                        晒单哈斯和代售点赛事的海底隧道好大神的是好嗲苏杭大赛海带丝都 誓师大会is的哈四大行晒单哈斯和代售点赛事的海底隧道好大神的是好嗲苏杭大赛海带丝都 誓师大会is的哈四大行晒单哈斯和代售点赛事的海底隧道好大神的是好嗲苏杭大赛海带丝都 誓师大会is的哈四大行晒单哈斯和代售点赛事的海底隧道好大神的是好嗲苏杭大赛海带丝都 誓师大会is的哈四大行
                    </p>
                    <div class="rec_bottom">
                        <p class="rec_date">2021年5月3日 13：00</p>
                        <div class="rec_l">
                            <span class="zan">
                                <img src="../../../assets/M_redio/player_max/pen.png" alt="">
                                <p>111890</p>
                            </span>
                            <img src="../../../assets/M_redio/player_max/pen.png" alt="" class="reply">
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style>
.rec_bottom{
    display: flex;
    justify-content: space-between;
}

.rec_l{
    width: 100px;
    justify-content: space-between;
}

.rec_l,.zan{
    display: flex;
    align-items: baseline;
}

.rec_date,.zan p{
    font-size: 12px;
    color: #717070;
    font-weight: normal;
}

.zan p{
    margin-left: 7px;
}

.zan img,.reply{
    width: 10px;
    height: 10px;
}



.recomend_box{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
}

.rec_title{
    display: flex;
    /* justify-content: baseline; */
    align-items:baseline;
    margin-bottom: 8px;
}

.rec_title h3{
    font-size: 15px;
    font-weight: bold;
    color: #d5d5d5;
}

.rec_title p{
    font-size: 12px;
    font-weight: bolder;
    color: #a9a9a9;
}

.inputrecom{
    width: 100%;
    height: 30px;
    cursor: pointer;
    border-radius: 5px;
    background-color: #3a3a3a;
    display: flex;
    justify-content: baseline;
    align-items: center;
}

.inputrecom img{
    width: 18px;
    height: 18px;
    margin-left: 8px;
}

.inputrecom p{
    color: #ccc;
    font-size: 13px;
    line-height: 30px;
    font-weight: bolder;
    margin-left: 5px;
}

.rec_cont{
    margin-top: 40px;
    width:100%;
}

.rec_cont h3{
    font-size: 15px;
    font-weight: bolder;
    color: #a9a9a9;
}


/* 精彩评论 */
.rec_cont{
    width:100%;
}
.recomends{
    margin-top:20px;
    display: flex;
    align-items:flex-start;
}

.touxiang{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.recright{
    width: 100%;
    margin-left: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid #363636;
}

.recmsg{
    font-size: 13px;
    color: #cfcfcf;
    font-weight: normal;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.recmsg span{
    font-size: 13px;
    color: #8fb8e2;
    font-weight: normal;
    letter-spacing: 0.5px;
}
</style>